<template>
	<view class="container-white">
		<form @submit="submit">
			<view class="list-cell flex-box">
				<picker @change="bindCertTypeChange" :range="certTypeList" range-key="label" class="picker">
					<view style="display: flex;align-items: center;">
						<view class="list-cell-name">
							<text style="color: #DC143C;">*</text>证件类型
						</view>
						<view style="margin-left: 10upx;flex:1;">{{dataForm.certType}}</view>
						<image src="../../static/icon/icon-go.png" class="icon-go" />
					</view>
				</picker>
			</view>

			<view class="list-cell flex-box">
				<view class="list-cell-name">
					<text style="color: #DC143C;">*</text>证件名称
				</view>
				<m-input class="m-input" type="text" clearable v-model="dataForm.certName" placeholder="请输入"></m-input>
			</view>

			<view class="list-cell flex-box">
				<view class="list-cell-name">
					<text style="color: #DC143C;"></text>证件编号
				</view>
				<m-input class="m-input" type="text" clearable v-model="dataForm.certNumber" placeholder="请输入"></m-input>
			</view>

			<view class="list-cell flex-box">
				<view class="list-cell-name">
					<text style="color: #DC143C;"></text>专业类型
				</view>
				<m-input class="m-input" type="text" clearable v-model="dataForm.specialty" placeholder="请输入"></m-input>
			</view>

			<view class="list-cell flex-box">
				<view class="list-cell-name">
					<text style="color: #DC143C;"></text>专业级别
				</view>
				<m-input class="m-input" type="text" clearable v-model="dataForm.level" placeholder="请输入"></m-input>
			</view>

			<view class="list-cell flex-box">
				<view class="list-cell-name">
					<text style="color: #DC143C;"></text>技术等级
				</view>
				<m-input class="m-input" type="text" clearable v-model="dataForm.skillLevel" placeholder="请输入"></m-input>
			</view>

			<view class="list-cell flex-box">
				<view class="list-cell-name">
					<text style="color: #DC143C;"></text>证件工种
				</view>
				<m-input class="m-input" type="text" clearable v-model="dataForm.craft" placeholder="请输入"></m-input>
			</view>

			<view class="list-cell flex-box">
				<picker mode="date" @change="bindcertOpenDateChange" class="picker">
					<view style="display: flex;">
						<view class="list-cell-name">
							<text style="color: #FFFFFF;"></text>发证日期
						</view>
						<view v-if="dataForm.certOpenDate" style="margin-left: 10upx;">{{dataForm.certOpenDate}}</view>
						<view v-else class="placeholder">请选择</view>
					</view>
				</picker>
			</view>

			<view class="list-cell flex-box">
				<view style="display: flex;flex: 1;">
					<view class="list-cell-name">
						<text style="color: #FFFFFF;"></text>有效期限
					</view>
					<picker mode="date" @change="bindCertStartTimeChange" class="picker">
						<view v-if="dataForm.certStartTime" style="margin-left: 10upx;">{{dataForm.certStartTime}}</view>
						<view v-else class="placeholder" style="margin-left: 10upx;">开始日期</view>
					</picker>
					<view style="width: 80upx;">至</view>
					<picker mode="date" @change="bindCertEndTimeChange" class="picker">
						<view v-if="dataForm.certEndTime" style="margin-left: 10upx;">{{dataForm.certEndTime}}</view>
						<view v-else class="placeholder" style="margin-left: 10upx;">结束日期</view>
					</picker>
				</view>
			</view>

			<view class="list-cell flex-box">
				<picker mode="date" @change="bindcertSecondTimeDateChange" class="picker">
					<view style="display: flex;">
						<view class="list-cell-name">复审时间</view>
						<view v-if="dataForm.certSecondTime" style="margin-left: 10upx;">{{dataForm.certSecondTime}}</view>
						<view v-else class="placeholder" style="margin-left: 10upx">请选择</view>
					</view>
				</picker>
			</view>

			<view class="list-cell flex-box">
				<view class="list-cell-name">发证机构</view>
				<m-input class="m-input" style="margin-left: 10upx;" type="text" clearable v-model="dataForm.certAuthority"
				 placeholder="请输入"></m-input>
			</view>

			<view class="list-cell flex-box">
				<view class="list-cell-name">操作项目</view>
				<m-input class="m-input" style="margin-left: 10upx;" type="text" clearable v-model="dataForm.remark" placeholder="请输入"></m-input>
			</view>

			<view class="list-cell">
				<view class="upload-box" @click="uploadZ(1)">
					<view v-if="!dataForm.photoZ">
						<image src="../../static/icon/icon-chooseImg.png" style="width: 120upx;height: 120upx;" />
						<view>证件正面</view>
					</view>
					<image v-else :src="dataForm.photoZ" class="cert-photo" />
				</view>

				<view class="upload-box" style="margin-top: 20upx;" @click="uploadF(1)">
					<view v-if="!dataForm.photoF">
						<image src="../../static/icon/icon-chooseImg.png" style="width: 120upx;height: 120upx;" />
						<view>证件背面</view>
					</view>
					<image v-else :src="dataForm.photoF" class="cert-photo" />
				</view>
			</view>

			<view class="submit-btn">
				<button type="primary" class="primary footer-btn" formType="submit">保存</button>
			</view>
		</form>

		<model v-if="hidden">
			<view class="model-content">
				<view>保存成功！</view>
			</view>
			<view class="model-footer">
				<button type="primary" class="model-footer-btn primary" @click="confirm">确定</button>
			</view>
		</model>
	</view>
</template>

<script>
	import {
		post_md5
	} from '../../common/request'
	import {
		setNavTitle
	} from './../../common/common'
	import uploader from '../../components/uploader/uploader.js'
	var graceChecker = require('../../js_sdk/graceui-dataChecker/graceChecker.js')

	export default {
		data() {
			return {
				id: '',
				certTypeList: [],
				dataForm: {
					certAuthority: '',
					certEndTime: '',
					certName: '',
					certNumber: '',
					certOpenDate: '',
					certSecondTime: '',
					certStartTime: '',
					certType: '',
					craft: '',
					deptName: '',
					level: '',
					photoF: '',
					photoZ: '',
					realname: '',
					remark: '',
					skillLevel: '',
					specialty: '',
					userId: null
				},
				hidden: false
			}
		},
		async onLoad(options) {
			if (options.id) {
				this.id = options.id
				setNavTitle('证件编辑')
				await this.loadCertInfo()
			} else {
				setNavTitle('新增证件')
			}
			await this.loadCertType()
		},
		methods: {
			// 获取证件类型
			async loadCertType() {
				let res = await post_md5('/usercenter-app/dict/type', {
					type: 'CERTTYPE'
				})
				this.certTypeList = res.data
				if (!this.dataForm.certType) {
					this.dataForm.certType = res.data[0].label
				}
			},

			// 获取证件信息
			async loadCertInfo() {
				let res = await post_md5(`/usercenter-app/cert/info/${this.id}`)
				this.dataForm = res.data
			},

			// 选择证件类型
			bindCertTypeChange(e) {
				this.dataForm.certType = this.certTypeList[e.detail.value].label
			},

			// 选择发证日期
			bindcertOpenDateChange(e) {
				this.dataForm.certOpenDate = e.detail.value
			},

			// 选择有效期开始时间
			bindCertStartTimeChange(e) {
				this.dataForm.certStartTime = e.detail.value
			},

			// 选择有效期结束时间
			bindCertEndTimeChange(e) {
				this.dataForm.certEndTime = e.detail.value
			},

			// 选择复审日期
			bindcertSecondTimeDateChange(e) {
				this.dataForm.certSecondTime = e.detail.value
			},

			// 上传证件正面
			async uploadZ() {
				let imageUrl = await uploader.uploadImage()
				this.dataForm.photoZ = imageUrl
			},

			// 上传证件反面
			async uploadF() {
				let imageUrl = await uploader.uploadImage()
				this.dataForm.photoF = imageUrl
			},

			// 提交表单
			submit() {
				var rule = [{
						name: 'certName',
						checkType: 'notnull',
						checkRule: '',
						errorMsg: '请填写证件名称'
					}
				]
				var requestData =JSON.parse(JSON.stringify(this.dataForm))
				requestData['certOpenDateStr'] = requestData.certOpenDate
				delete requestData['certOpenDate']
				requestData['certSecondTimeStr'] = requestData.certStartTime
				delete requestData['certSecondTime']
				requestData['certStartTimeStr'] = requestData.certStartTime
				delete requestData['certStartTime']
				requestData['certEndTimeStr'] = requestData.certEndTime
				delete requestData['certEndTime']
				var checkRes = graceChecker.check(requestData, rule)
				if (checkRes) {
					if (this.id) {
						this.editCert(requestData)
						return
					}
					requestData.userId = uni.getStorageSync('userId')
					this.addCert(requestData)
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: 'none'
					})
				}
			},

			// 新增证件
			addCert(params) {
				post_md5('/usercenter-app/cert/save', params).then(res => {
					if (res.code == 200) {
						this.hidden = true
					}
				})
			},

			// 编辑证件
			editCert(params) {
				post_md5('/usercenter-app/cert/update', params).then(res => {
					if (res.code == 200) {
						this.hidden = true
					}
				})
			},

			// 提示弹窗
			confirm() {
				this.hidden = false
				uni.navigateBack({})
			}
		}
	}
</script>

<style>
	.list-cell {
		border-top: 1px solid #ededed;
		padding: 30upx;
	}

	.list-cell-name {
		width: 140upx;
		white-space: nowrap;
		text-align: right;
		margin-right: 10upx;
	}

	.picker {
		flex: 1;
		text-align: left;
	}

	.placeholder {
		color: #808080;
	}

	.upload-box {
		border: 1px dashed #02a8f4;
		height: 418upx;
		border-radius: 10upx;
		color: #02a8f4;
		font-size: 28upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cert-photo {
		width: 100%;
		height: 418upx;
		border-radius: 10upx;
	}

	.submit-btn {
		height: 98upx;
		font-size: 28upx;
		background: #02a8f4;
		width: 100%;
	}

	.icon-go {
		width: 14upx;
		height: 26upx;
	}
</style>
